<script setup lang="ts">
import { computed } from 'vue'
import { useI18n } from 'vue-i18n'
const { t } = useI18n()

const props = defineProps<{
  index: string | number
}>()

const emit = defineEmits<{
  change: [number]
}>()

const menu = computed(() => {
  return [
    {
      name: t('system.menu.home'),
    },
    {
      name: t('system.menu.aboutMe'),
    },
    {
      name: t('system.menu.ability'),
    },
    {
      name: t('system.menu.experience'),
    },
    {
      name: t('system.menu.contactMe'),
    },
  ]
})

const handleClick = (index: number) => {
  emit('change', index)
}
</script>
<template>
  <div
    class="fixed flex flex-col justify-center right-[20px] top-[50%] w-[24px] h-[165px] mt-[-82.5px] bg-[url('../assets/img/sprite.png')] bg-no-repeat bg-position-[0_-110px]"
  >
    <div
      class="group relative w-full h-[16px] m-[2px_auto] cursor-pointer"
      v-for="(item, num) in menu"
      :key="num"
      @click="handleClick(num)"
    >
      <div
        class="block w-[16px] h-[16px] m-[2px_auto] bg-[url('../assets/img/sprite.png')] bg-no-repeat"
        :class="props.index === num ? 'bg-position-[-40px_-110px]' : 'bg-position-[-40px_-131px]'"
      ></div>
      <div
        class="text-white text-[12px] leading-[19px] hidden group-hover:block text-center absolute left-[-80px] top-0 w-[76px] h-[19px] bg-[url('../assets/img/sprite.png')] bg-no-repeat bg-position-[0px_-80px]"
      >
        {{ item.name }}
      </div>
    </div>
  </div>
</template>
